// 拆分出来的路由配置信息
// 引入路由组件

// 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
// 如果我们能把不同路由对应的组件分割成不同的代码块，
// 然后当路由被访问的时候才加载对应组件，这样就更加高效了。

export default [
    {
        name: 'center',
        path: '/center', // 个人中心
        component: () => import('@/views/Center'),
        meta: {show: true}
    },
    {
        name: 'pay',
        path: '/pay', // 支付页面
        component: () => import( '@/views/Pay'),
        meta: {show: true},
        // 路由独享守卫
        beforeEnter: (to, from, next) => {
            // 去 /pay 页面，必须是从 /shopcart 而来
            if (from.path === '/shopcart') {
                next()
            } else {
                // 其他的路由组件而来，停留在当前
                next(false)
            }
        }
    },
    {
        name: 'trade',
        path: '/trade',
        component: () => import('@/views/Trade'),
        meta: {show: true},
        // 路由独享守卫
        beforeEnter: (to, from, next) => {
            // 去交易页面，必须是从购物车而来
            if (from.path === '/shopcart') {
                next()
            } else {
                // 其他的路由组件而来，停留在当前
                next(false)
            }
        }
    },
    {
        name: 'shopcart',
        path: '/ShopCart', // 购物车
        component: () => import('@/views/ShopCart'),
        meta: {show: true}
    },
    {
        name: 'addcartsuccess',
        path: '/addcartsuccess', // 路由的路径要小写（加入购物车成功页面）
        component: () => import('@/views/AddCartSuccess'),
        meta: {show: true}
    },
    {
        name: "home",
        path: "/home",
        component: () => import('@/views/Home'),
        meta: {show: true}
    },
    {
        name: 'detail',  // 是当前路由的标识名称
        path: '/detail/:skuId',
        component: () => import('@/views/Detail'),
        meta: {show: true}
    },
    {
        path: "/search/:keyword?", // 占位，接收路由参数, 后面加 ? 号，代表参数可传可不传
        component: () => import('@/views/Search'),
        meta: {show: true},
        name: "search",
        props: ($route) => {
            return ({keyword: $route.params.keyword, k: $route.query.k})
        }
        // props: {a: 1, b: 2} // 传对象
        // props: true // 路由组件传递 props 数组，把 params 参数作为路由组件的属性传递
    },
    {
        path: "/login",
        component: () => import('@/views/Login'),
        meta: {show: false}
    },
    {
        path: "/register",
        component: () => import( '@/views/Register'),
        meta: {show: false}
    }
]
